<template>
  <div class="form-element">
    <div class="col-md-12 padding-0">
      <div class="col-md-12">
        <div class="panel form-element-padding">
          <div class="panel-heading">
            <h4>修改信息</h4>
          </div>
          <div style="padding-left:160px">
            <el-form :inline="true" :model="passenger" :rules="rules" ref="passenger">
              <el-form-item label="昵称" prop="nickName">
                <el-input v-model="passenger.nickName">
                </el-input>
              </el-form-item>

              <el-form-item label="姓名" prop="passengerName">
                <el-input v-model="passenger.passengerName">
                </el-input>
              </el-form-item>

              <el-form-item label="身份证号" prop="cardId">
                <el-input v-model="passenger.cardId">
                </el-input>
              </el-form-item>

              <el-form-item label="手机" prop="phone">
                <el-input v-model="passenger.phone">
                </el-input>
              </el-form-item>

              <el-form-item label="所在城市" prop="city">
                <el-input v-model="passenger.city">
                </el-input>
              </el-form-item>

              <el-form-item label="邮箱" prop="email">
                <el-input v-model="passenger.email">
                </el-input>
              </el-form-item>

              <el-form-item label="QQ/微信" prop="wechat">
                <el-input v-model="passenger.wechat">
                </el-input>
              </el-form-item>

              <el-form-item>
                <el-button  type="danger" @click="submit('passenger')">确认修改</el-button>
              </el-form-item>




            </el-form>

          </div>


        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "EditInfo",
  data(){
    return{
      passenger:{},
      rules:{
        phone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请输入手机号"));
              } else {
                var reg = /^1[3456789]\d{9}$/;
                if (!reg.test(value)) {
                  callback(new Error("请输入有效的手机号码"));
                }
              }
            },
            trigger: "blur",
          },
        ],
        passengerName: [
          {
            required: true,
            message: "请输入真实姓名",
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请输入真实姓名"));
              } else {
                var reg = /^[\u4e00-\u9fa5]+$/;
                if (value.length < 5 && reg.test(value)) {
                  callback();
                } else {
                  return callback(new Error("请输入正确的中文名"));
                }
              }
            },
            trigger: "blur",
          },
        ],
        cardId: [
          {
            required: true,
            message: "请输入正确身份证号",
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请输入身份证号"));
              } else {
                var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
                if (value.length == 18 && reg.test(value)) {
                  callback();
                } else {
                  return callback(new Error("请输入正确的身份证号"));
                }
              }
            },
            trigger: "blur",
          },
        ],
      }
    }
  },
  created(){
    this.passenger=JSON.parse(sessionStorage.getItem('passenger'))
  },
  methods:{
    submit(formName){
      const _this = this
          this.$axios.post('http://localhost:8181/passenger/editInfo', this.passenger)
            .then(function (resp) {
              if (resp.data=='success') {
                _this.$message.success("修改成功")
                sessionStorage.removeItem('passenger')
                sessionStorage.setItem('passenger',JSON.stringify(_this.passenger))
              } else {
                _this.$message.error("错误请重试")
              }
            })
        }


  }

}
</script>

<style scoped>

</style>
